<template>
    <h1>用户理财项目列表</h1>
    
    理财编号:<input type="text" v-model="Id">
    理财名称:<input type="text" v-model="Name">
    理财收益:<input type="text" v-model="MinMoney">-
    <input type="text" v-model="MaxMoney">

    <input type="button" value="查询" @click="ShowFinan()">

    <table class="table table-bordered" border="1">
        <thead>
            <tr>
                <th>理财编号</th>
                <th>理财名称</th>
                <th>年收益</th>
                <th>月收益</th>
                <th>最低金额</th>
                <th>理财人数</th>
                <th>理财风险等级</th>
                <th>年限</th>
                <th>利率</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody>
            <tr v-for=" item in Show">
                <td> {{ item.F_FId }}</td>
                <td> {{ item.F_FName }}</td>
                <td> {{ item.F_YearMoney }}</td>
                <td> {{ (Number(item.F_YearMoney) /12).toFixed(2)  }}</td>
                <td> {{ item.F_MinMoney }}</td>
                <td> {{ item.F_Count }}</td>
                <td> {{ Number(item.F_FinanLevel) ==0?"低风险": item.F_FinanLevel?"中风险":"高风险" }}</td>
                <td> {{ item.I_Year }}</td>
                <td> {{ item.I_Interest }}</td>
                <td>
                    <a href="#" @click="jump(item.F_FId)" >用户购买明细</a>
                </td>
            </tr>
        </tbody>

    </table>

    共有{{ Page.totalCount }}条记录,每页显示{{ Page.PageSize }},共{{ Page.PageIndex }}/{{ Page.PageCount }}页

    <a href="#" @click="Size(1)" >首页</a>&nbsp;&nbsp;
    <a href="#" @click="Size(Page.PageIndex-1)" >上一页</a>&nbsp;&nbsp;
    <a href="#" @click="Size(Page.PageIndex+1)" >下一页</a>&nbsp;&nbsp;
    <a href="#" @click="Size(Page.PageCount)" >尾页</a>&nbsp;&nbsp;

    <select v-model="Csize" @change="Guan" >
        <option value='1'>每页显示1条</option>
        <option value='2'>每页显示2条</option>
        <option value='3'>每页显示3条</option>
    </select>

    <input type="text" v-model="Ps" style="width: 40px;"  >
    <input type="button" value="go" @click="GoPI" >

</template>

<script setup lang="ts">

import {ref,onMounted} from "vue"
import axios from "axios"
import { useRouter } from 'vue-router'

const router = useRouter()

const Show = ref([{
    F_FId:"",
    F_FName:"",
    F_YearMoney:"",
    F_MinMoney:"",
    F_Count:"",
    F_FinanLevel:"",
    I_ID:"",
    I_Year:"",
    I_Interest:""
}])

const Id = ref("")
const Name = ref("")
const MinMoney = ref("")
const MaxMoney = ref("")

const Page = ref({
    PageIndex:1,
    PageSize:3,
    totalCount:0,
    PageCount:0
})

const Csize = ref(1);
const Ps = ref();

onMounted (()=>{
    ShowFinan();
})

const ShowFinan = ()=>{
    axios({
        method:"get",
        url:"http://localhost:56707/api/Finan/ShowFinan",
        params:{
            Id:Id.value,
            Name:Name.value,
            MinMoney:MinMoney.value,
            MaxMoney:MaxMoney.value,
            PageIndex:Page.value.PageIndex,
            PageSize:Page.value.PageSize
        }
    })
    .then(res=>{
        console.log(res.data)
        Show.value = res.data.list
        Page.value.totalCount = res.data.totalCount
        Page.value.PageCount = res.data.PageCount
    })
    .catch(err=>{
        console.log(err)
    })
}

const Size = (i:number)=>{
    if(i>0 && i<=Page.value.PageCount){
        Page.value.PageIndex = i
        ShowFinan();
    }
    else{
        alert("页码有误!");
        return;
    }
}

const Guan = ()=>{
    Page.value.PageSize = Csize.value;
    ShowFinan();
}

const GoPI = ()=>{
    Page.value.PageIndex = Number(Ps.value);
    ShowFinan();
}

const jump = (Id:string)=>{
    router.push({
        name:"UserFinanInfo",
        params:{
            Id:Id
        }
    })
}


</script>
